<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
	<title>天天生鲜-购物车</title>
	<link rel="stylesheet" type="text/css" href="/static/css/reset.css">
	<link rel="stylesheet" type="text/css" href="/static/css/main.css">
</head>
<body>
		<div class="header_con">
                <div class="header">
                    <div class="welcome fl">欢迎来到天天生鲜!</div>
                    <div class="fr">
                        {{if compare .userName ""}}
                        <!-- 未登录 -->
                        <div class="login_btn fl">
                                <a href="/login">登录</a>
                                <span>|</span>
                                <a href="/register">注册</a>
                            </div>		
                        {{else}}
                        <!-- 已登录 -->
                        <div class="login_btn fl">
                                欢迎您：<em>{{.userName}}</em>
                                <span>|</span>
                                <a href="/user/logout">退出</a>
                            </div>
                        {{end}}
                        <div class="user_link fl">
                            <span>|</span>
                            <a href="/user/userCenterInfo">用户中心</a>
                            <span>|</span>
                            <a href="/user/cart">我的购物车</a>
                            <span>|</span>
                            <a href="/user/userCenterOrder">我的订单</a>
                        </div>
                    </div>
                </div>		
            </div>

	<div class="search_bar clearfix">
		<a href="/" class="logo fl"><img src="/static/images/logo.png"></a>
		<div class="sub_page_name fl">|&nbsp;&nbsp;&nbsp;&nbsp;购物车</div>
		<div class="search_con fr">
				<form  method="GET" action="/goodsSearch">
					<input type="text" class="input_text fl" name="keywords" placeholder="搜索商品" value="">
					<input type="submit" class="input_btn fr" name="" value="搜索">
				</form>
		</div>		
	</div>
	<div class="total_count">全部商品<em>{{.totalCount}}</em>件</div>	
	<ul class="cart_list_th clearfix">
		<li class="col01">商品名称</li>
		<li class="col02">商品单位</li>
		<li class="col03">商品价格</li>
		<li class="col04">数量</li>
		<li class="col05">小计</li>
		<li class="col06">操作</li>
	</ul>
	<form action="/user/showOrder" method="POST" onsubmit="return checkCount()">
		{{range .goods}}
			<ul class="cart_list_td clearfix">
				<li class="col01"><input type="checkbox" name="skuid" checked="" value="{{.goodssku.Id}}"></li>
				<li class="col02"><a href="/goodsDetail?id={{.goodssku.Id}}" ><img src="http://94.191.18.219:8888/{{.goodssku.Image}}"></a></li>
				<li class="col03" id="goodsName">{{.goodssku.Name}}<br><em>{{.goodssku.Price}}元/{{.goodssku.Unite}}</em></li>
				<li class="col04">{{.goodssku.Unite}}</li>
				<li class="col05">{{.goodssku.Price}}元</li>
				<li class="col06">
					<div class="num_add">
						<a href="javascript:;" class="add fl">+</a>
						<input type="text"  name="goodsCount" class="num_show fl" skuid="{{.goodssku.Id}}" value={{.count}} stock={{.goodssku.Stock}}>	
						<a href="javascript:;" class="minus fl">-</a>	
					</div>
				</li>
				<li class="col07">{{.addPrice}}.00元</li>
				<li class="col08"><a href="javascript:;"  class="deleteCart" skuid="{{.goodssku.Id}}" style="color: blue">删除</a></li>
			</ul>
		{{end}}
		

		<ul class="settlements">
			<li class="col01"><input type="checkbox" name="" checked=""></li>
			<li class="col02">全选</li>
			<li class="col03">合计(不含运费)：<span>¥</span><em>{{.totalPrice}}</em><br>共计<b>{{.totalCount}}</b>件商品</li>
			<input  type="hidden" name="source"  value=0 >
			<li class="col04"><input type="submit" value="去结算" style="display:block;height:78px;width:169px;background-color:#ff3d3d;text-align:center;line-height:78px;color:#fff;font-size:24px;border:0;"></li>
		</ul>
	</form>
	<div class="footer">
		<div class="foot_link">
			<a href="#">关于我们</a>
			<span>|</span>
			<a href="#">联系我们</a>
			<span>|</span>
			<a href="#">招聘人才</a>
			<span>|</span>
			<a href="#">友情链接</a>		
		</div>
		<p>CopyRight © 2016 北京天天生鲜信息技术有限公司 All Rights Reserved</p>
		<p>电话：010-****888    京ICP备*******8号</p>
	</div>
	

	
</body>
<!-- 单独写script标签引入jquery？ -->
<script type="text/javascript" src="/static/js/jquery-1.12.4.min.js"></script>
<script type="text/javascript">
// 提交购物车商品之前，先校验库存
	function checkCount(){
		// 遍历每一个iinput
		res=true
		$('input[name="goodsCount"]').each(function(){
			count=$(this).val()
			stock=$(this).attr('stock')
			goodsName=$('#goodsName').text()
			// alert(count)
			if (parseInt(stock)<1){
				
				msg=goodsName+"库存不足，请等待商品补充库存"
				alert(msg)
				res= false
			}else if(parseInt(count)>parseInt(stock)){
				msg=goodsName+"购买数量超出商品库存："+stock
				alert(msg)
				$('input[name="goodsCount"]').val(stock)
			res= false
			}
		})
		return res
	}
// 根据用户购物车变动总价和总件数
	function UpdateGoodsPrice(){
		totalCount=0
		totalPrice  =0
		$('.cart_list_td').find(':checked').parents('ul').each(function(){
				count=$(this).children('.col06').children('.num_add').children('.num_show').val()
				price=$(this).children('.col07').text()
				count=parseInt(count)
				price=parseFloat(price)
				// 叠加
				totalCount+=count
				totalPrice  +=price
			}
		)				
		// alert(totalCount)
		$('.settlements').children('.col03').children('em').text(totalPrice)
		$('.settlements').children('.col03').children('b').text(totalCount)
		$('.total_count').children('em').text(totalCount)		
	}
	// 设置全选与全不选的触发结果
	$('.settlements').find(':checkbox').change(function(){//必须使用find获取这个复选框
		// 获取当前选中状态
		is_checked = $(this).prop('checked')
		// 设置所有状态与其保持一直
		$('.cart_list_td').find(':checkbox').each(function(){
			$(this).prop('checked',is_checked)
		})
		// 更新商品的总价格
		UpdateGoodsPrice()
	})
	// 根据商品的改变而改变全选状态
	$('.cart_list_td').find(':checkbox').change(function(){
		checkboxLength=$('.cart_list_td').find(':checkbox').length
		checkedLength=$('.cart_list_td').find(':checked').length
		if(checkboxLength>checkedLength){
			$('.settlements').find(':checkbox').prop('checked',"")
		}else{
			$('.settlements').find(':checkbox').prop('checked',"checked")
		}
		UpdateGoodsPrice()
	})
	// 增加商品数量
	$('.add').click(function(){
		count=$(this).next().val()
		count=parseInt(count)+1
		stock=parseInt($(this).next().attr("stock"))
		// 若超过了库存
		if(count>stock){
			msg="超过当前商品最大库存："+stock
			alert(msg)
			$(this).next().val(stock)
			return
		}
		// 没有超过库存，则更新到redis
		skuid=parseInt($(this).next().attr('skuid'))
		param={"skuid":skuid,"count":count}
		// ajxs是异步执行的，若有用变量保存状态再判断执行的需求（有先后顺序），需要解除异步。
		errUpdate=true
		$.ajaxSettings.async=false
		$.post('/user/UpdateCart',param,function(data){
			if(data.code==undefined){
				　window.location.href="/login";
			}else	if(data.code!=200){
				// 发生其他错误
				alert(data.msg)
				errUpdate=true
			}else{
				errUpdate=false
			}
		})
		// 及时打开ajax的异步
		$.ajaxSettings.async=true
		if(!errUpdate){
			$(this).next().val(count)
			// 小计随数量变化
			price=$(this).parents('ul').children('.col05').text()
			price=parseFloat(price)
			amount=count * price
			// 更新小计07
			price=$(this).parents('ul').children('.col07').text(amount.toFixed(2)+"元")
			// 更新总价和数量
			UpdateGoodsPrice()
		}
	})
	// 减少商品数量
	$('.minus').click(function(){
		count=$(this).prev().val()
		count=parseInt(count)-1
		if (count<1){
			alert("数量不能小于1")
			count=1
			$(this).prev().val(count)
			return
		}
		skuid=$(this).prev().attr('skuid')
		param={"skuid":skuid,"count":count}
		errUpdate=true
		$.ajaxSettings.async=false
		$.post('/user/UpdateCart',param,function(data){
			if(data.code==undefined){
				window.location.href="/login"
			}else if(data.code==200){
				errUpdate=false
			}else{
				alert(data.msg)
			}
		})
		$.ajaxSettings.async=true
		if(!errUpdate){
			$(this).prev().val(count)
			// 小计随数量变化
			price=$(this).parents('ul').children('.col05').text()
			price=parseFloat(price)
			amount=count * price
			// 更新小计
			price=$(this).parents('ul').children('.col07').text(amount.toFixed(2)+"元")
			// 更新总价和数量
			UpdateGoodsPrice()
		}
	})
	//手动输入商品数量
	preCount = 0//全局变量，存放共享内容
	$('.num_show').focus(function(){
		preCount=$(this).val()
	})
	$('.num_show').blur(function(){
		count=$(this).val()
		if(isNaN(count) || count.trim().length==0 || parseInt(count) <1){
			// 输入值不符合规则，则恢复初始值
			alert("数据不合法，请重新输入")
			$(this).val(preCount)
			// alert(preCount)
			return
		}
		// 输入值超过最大库存，设置为库存,注意不需要return
		stock=$(this).attr('stock')
		if(parseInt(count)>parseInt(stock)){
			msg="超过当前商品最大库存："+stock
			alert(msg)
			$(this).val(stock)
			count=stock
		}
		skuid=parseInt($(this).attr('skuid'))
		count=parseInt(count)
		param={"skuid":skuid,"count":count}
		errUpdate=true
		$.ajaxSettings.async=false
		$.post('/user/UpdateCart',param,function(data){
			if(data.code==undefined){
				alert("用户未登录，请登录！")
				window.location.href="/login"
				return
			}else if(data.code==200){
				errUpdate=false
			}else{
				errUpdate=true
				alert(data.msg)
			}
		})
		$.ajaxSettings.async=true
		if(!errUpdate){
			$(this).val(count)
			// 小计随数量变化
			price=$(this).parents('ul').children('.col05').text()
			price=parseFloat(price)
			amount=count * price
			// 更新小计
			price=$(this).parents('ul').children('.col07').text(amount.toFixed(2)+"元")
			// 更新总价和数量
			UpdateGoodsPrice()
		}
	})
	// 删除某个商品
	$('.deleteCart').click(function(){
		skuid=parseInt($(this).attr('skuid'))
		param={"skuid":skuid}
		errUpdate=true
		$.ajaxSettings.async=false
		$.post('/user/deleteCart',param,function(data){
			if(data.code==undefined){
				window.location.href="/login"
			}else if(data.code==200){
				// 方法1：window.location.href="/user/cart" 
				// 方法2:前端删除
				errUpdate=false
			}else{
				alert(msg) 
			}
		})
		$.ajaxSettings.async=true
		if(!errUpdate){
			$(this).parents('ul').remove()
			UpdateGoodsPrice()
		}
	})
</script>
</html>